<template>
  <view class="qiun-columns">
    <view class="headerP">
      <view
        class=""
        style="
          font-size: 0.68rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        "
        >总收益(元)</view
      >

      <view class="dataListP">
        <view
          @click="seleceDateM(index)"
          v-for="(item, index) in dataList"
          :class=" index == selectDataList? 'dataListP-items-selected': 'dataListP-items'
          "
          :key="index"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <view class="qiun-charts">
      <!--#ifdef MP-ALIPAY -->
      <canvas
        canvas-id="canvasColumn"
        id="canvasColumn"
        class="charts"
        :style="{
          width: 1333 + 'px',
          height: cHeight * pixelRatio + 'px',
          transform: 'scale(' + 1 / pixelRatio + ')',
          'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
          'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
        }"
      ></canvas>
      <!--#endif-->

      <!--#ifndef MP-ALIPAY -->
      <canvas
        canvas-id="canvasColumn"
        id="canvasColumn"
        class="charts"
      ></canvas>
      <!--#endif-->
    </view>
  </view>
</template>

<script>
import uCharts from "../../u-charts/u-charts.min.js";

import { demoData } from "./ucharts-demo-data.js";

import {
  getWeekStartDate,
  getWeekEndDate,
  getLastWeekStartDate,
  getLastWeekEndDate,
  getMonthStartDate,
  getMonthEndDate,
  getLastMonthStartDate,
  getLastMonthEndDate
} from "./datas";

import { totaleChart } from "../../utils/uniApi";

var _self;

var canvaColumn = null;
export default {
  data() {
    return {
      cWidth: "",
      cHeight: "",
      pixelRatio: 1,
      serverData: "",
      dataList: ["本月", "上月", "本周", "上周"],
      selectDataList: 0,
      startData: getMonthStartDate(),
      categories: [], //图表下面的日期
      earnings: [], //显示的数据
    };
  },
  mounted() {
      this.indexM()
  },
  methods: {
  indexM(){
  //  alert('图表')
    uni.showLoading({
      title: "加载中",
    });
    _self = this;
    //#ifdef MP-ALIPAY
    uni.getSystemInfo({
      success: function (res) {
        console.log(res, "123123");
        if (res.pixelRatio > 1) {
          //正常这里给2就行，如果pixelRatio=3性能会降低一点
          //_self.pixelRatio =res.pixelRatio;
          _self.pixelRatio = 2;
        }
      },
    });
    //#endif
    this.cWidth = uni.upx2px(690);   //控制滚动
    this.cHeight = uni.upx2px(500);

    this.getDataList();


    console.log(getWeekStartDate(),'获得本周的开始日期'); //获得本周的开始日期
    console.log(getWeekEndDate(),'获得本周的结束日期 ');

    console.log(getLastWeekStartDate(),'获得上周的开始日期');
    console.log(getLastWeekEndDate(),'获得上周的结束日期');

    // // getMonthStartDate 获得本月的开始日期
    // // getMonthEndDate  获得本月的结束日期

    //   getLastMonthStartDate,  获得上月的开始日期
    // getLastMonthEndDate  获得上月的结束日期
  
  
  },

    getDataList() {

    uni.showLoading({
	title: '加载中'
});

        if(this.selectDataList == 0){
          var  startDateddd=getMonthStartDate()
           var  startDatedd=getMonthEndDate()
        }else if(this.selectDataList == 1){
           var  startDateddd=getLastMonthStartDate()
            var  startDatedd=getLastMonthEndDate()
          }
          else if(this.selectDataList == 2){
           var  startDateddd=getWeekEndDate()
           var  startDatedd=getWeekStartDate()
          }
          else if(this.selectDataList == 3){
           var  startDateddd=getLastWeekStartDate()
            var  startDatedd=getLastWeekEndDate()
          }

      let params = {
        userId:
          uni.getStorageSync("userId") == ""
            ? ""
            : parseInt(uni.getStorageSync("userId")),
        startDate:startDateddd,
        // selectDataList   控制选中
         endDate:startDatedd,
      };
      console.log(params, uni.getStorageSync("userId"));

      totaleChart(params).then((res) => {
        console.log("zongshuj", res);

        this.$emit("func", res.data.data.terminalList);
        this.$emit("funcs", res.data.data.monthAndWeek);
        
        this.categories = [];
        this.earnings = [];
        // console.log(listed,'li')
        var listed = res.data.data.graphList;
        console.log(listed, "li");
        listed.filter((item, index) => {
          // console.log(item,'item')
          this.categories.push(item.date);
          this.earnings.push(item.earnings);
        });

        this.getServerData();
      });
    },

    seleceDateM(index) {
      this.selectDataList = index;

      this.getDataList();
    },
    getServerData() {
      console.log(demoData.data);

      console.log(this.categories, "下面日期");

      let Column = {
        categories: [],
        series: [],
      };
      //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去

      //Column.categories = demoData.data.ColumnB.categories;
      // Column.categories = [0,1,2,3,4,5,6,7,8,9,10,11]

      Column.categories = this.categories;

      //   Column.series = demoData.data.ColumnB.series;   //显示的数据

      Column.series = [
        {
          name: this.dataList[this.selectDataList],
          data: this.earnings,
          color: "#4dbf92", //   可以是线条的颜色
        },
      ];

      _self.textarea = JSON.stringify(demoData.data.ColumnB);

      _self.showColumn("canvasColumn", Column);

      uni.hideLoading();
    },
    showColumn(canvasId, chartData) {
      //chartData  数据

      canvaColumn = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "line", //column
        legend: true,
        fontSize: 6,
        background: "#FFFFFF",
        dataPointShape: true,
        pixelRatio: _self.pixelRatio,
        animation: true,
        categories: chartData.categories,
        series: chartData.series,
        xAxis: {
          disableGrid: true,
          gridColor: "#CCCCCC",
        },
        yAxis: {
			format: (val) => {
				return val.toFixed(2)//此处为保留一位小数
			},
		},
        dataLabel: true,
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          column: {
            width:
              (_self.cWidth * _self.pixelRatio * 0.45) /
              chartData.categories.length,
          },
        },
      });
    },
    changeData() {
      canvaColumn.updateData({
        series: _self.serverData.ColumnB.series,
        categories: _self.serverData.ColumnB.categories,
      });
    },
  },
};
</script>

<style>
/* page {
  background: #f2f2f2;
  width: 750upx;
  overflow-x: hidden;
} */

.qiun-padding {
  padding: 2%;
  width: 96%;
}

.qiun-wrap {
  display: flex;
  flex-wrap: wrap;
}

.qiun-rows {
  display: flex;
  flex-direction: row !important;
}

.qiun-columns {
  display: flex;
  flex-direction: column !important;
}

.qiun-common-mt {
  margin-top: 10upx;
}

.qiun-bg-white {
  background: #ffffff;
}

.qiun-title-bar {
  /* width: 96%; */
  padding: 10upx 2%;
  flex-wrap: nowrap;
}

.qiun-title-dot-light {
  border-left: 10upx solid #0ea391;
  padding-left: 10upx;
  font-size: 32upx;
  color: #000000;
}

/* 通用样式 */
.qiun-charts {
  /* width: 100%;
  overflow-x: scroll; */


  
  /* width: 750upx;
  height: 500upx;
  background-color: #ffffff; */
}

.charts {
  height: 500upx;
  width: 110%;
  /* width: 750upx;
  height: 500upx;
  background-color: #ffffff; */
}

.headerP {
  background-color: white;
  display: flex;
  justify-content: space-between;
}

.dataListP {
  display: flex;
  align-items: center;
}
.dataListP-items {
  background: #ffffff;

  border-radius: 0.3rem;

  font-size: 0.68rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: 0.1rem 0.4rem;
  margin: 0rem 0.2rem;
}

.dataListP-items-selected {
  background: #ffffff;
  border: 1px solid #02af74;
  border-radius: 0.3rem;
  color: "#02AF74";
  font-size: 0.68rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  padding: 0.1rem 0.4rem;
  margin: 0rem 0.2rem;
}

#canvasColumn > view:nth-child(2) {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* overflow: scroll; */
}
</style>
